<template>
  <div class="phone-container">
    <!-- 手机外壳 -->
    <div class="phone-frame">
      <!-- 音量键 -->
      <div class="volume-buttons">
        <div class="volume-up"></div>
        <div class="volume-down"></div>
      </div>

      <!-- 开机键 -->
      <div class="power-button"></div>

      <!-- 静音开关 -->
      <div class="mute-switch"></div>

      <!-- 手机屏幕内容 -->
      <div class="phone-screen">
        <div class="hospital-list-container">
          <!-- 顶部导航栏 -->
          <van-nav-bar title="院区列表" left-arrow fixed placeholder @click-left="goBack" class="custom-nav">
            <template #right>
              <van-icon name="ellipsis" size="20" />
              <van-icon name="question-o" size="20" style="margin-left: 12px" />
            </template>
          </van-nav-bar>

          <!-- 主要内容区域 -->
          <div class="content">
            <!-- 提示文字 -->
            <div class="tip-text">请选择院区</div>

            <!-- 加载状态 -->
            <van-loading v-if="loading" class="loading-container" size="24px">
              加载中...
            </van-loading>

            <!-- 院区列表 -->
            <div v-else class="hospital-list">
              <div v-for="hospital in hospitalList" :key="hospital.id" class="hospital-item"
                @click="selectHospital(hospital)">
                <div class="hospital-icon">
                  <van-icon name="location-o" size="24" color="#4285f4" />
                </div>
                <div class="hospital-info">
                  <div class="hospital-name">{{ hospital.name }}</div>
                  <div class="hospital-address">{{ hospital.address || '暂无地址信息' }}</div>
                </div>
                <div class="arrow-icon">
                  <van-icon name="arrow" size="16" color="#c8c9cc" />
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-if="!loading && hospitalList.length === 0" class="empty-state">
              <van-icon name="info-o" size="48" color="#ccc" />
              <p>暂无院区信息</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getHospitalBranchList } from '@/api/hospital'
import type { HospitalBranch } from '@/types/api'

const router = useRouter()

// 响应式数据
const hospitalList = ref<HospitalBranch[]>([])
const loading = ref(false)

// 获取院区列表
const fetchHospitalList = async () => {
  loading.value = true
  try {
    const response = await getHospitalBranchList()
    console.log(response);
    
    if (response.code === 100) {
      hospitalList.value = response.data || []
    } else {
      showToast(response.message || '获取院区列表失败')
    }
  } catch (error) {
    console.error('获取院区列表失败:', error)
    showToast('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 选择院区
const selectHospital = (hospital: HospitalBranch) => {
  showToast(`已选择${hospital.name}`)
  // 保存选择的院区信息到本地存储
  localStorage.setItem('selectedHospital', JSON.stringify(hospital))
  // 跳转到开单申请页面
  router.push('/order-application')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchHospitalList()
})
</script>

<style scoped>
/* 手机容器 */
.phone-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 手机外壳 */
.phone-frame {
  position: relative;
  width: 375px;
  height: 812px;
  background: #1a1a1a;
  border-radius: 40px;
  padding: 8px;
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px #3a3a3a;
}

/* 音量键 */
.volume-buttons {
  position: absolute;
  left: -2px;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.volume-up,
.volume-down {
  width: 4px;
  height: 30px;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 开机键 */
.power-button {
  position: absolute;
  right: -2px;
  top: 120px;
  width: 4px;
  height: 60px;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 静音开关 */
.mute-switch {
  position: absolute;
  left: -2px;
  top: 200px;
  width: 4px;
  height: 25px;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 手机屏幕 */
.phone-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.hospital-list-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.custom-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.van-nav-bar__title) {
  color: white;
  font-weight: 500;
}

:deep(.van-nav-bar__left .van-icon) {
  color: white;
}

:deep(.van-nav-bar__right .van-icon) {
  color: white;
}

.content {
  padding: 16px;
}

.tip-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  padding-left: 4px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.hospital-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hospital-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.hospital-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hospital-item:active {
  transform: translateY(0);
  border-color: #4285f4;
}

.hospital-icon {
  width: 48px;
  height: 48px;
  background: #e3f2fd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hospital-info {
  flex: 1;
  min-width: 0;
}

.hospital-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.4;
}

.hospital-address {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.arrow-icon {
  flex-shrink: 0;
  margin-left: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state p {
  margin-top: 16px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .hospital-item {
    padding: 14px;
  }

  .hospital-name {
    font-size: 15px;
  }

  .hospital-address {
    font-size: 12px;
  }
}

/* 点击效果 */
.hospital-item:active .hospital-icon {
  background: #bbdefb;
}

.hospital-item:active .hospital-name {
  color: #4285f4;
}

/* 手机外壳响应式 */
@media (max-width: 420px) {
  .phone-frame {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0;
  }

  .phone-screen {
    border-radius: 0;
  }

  .volume-buttons,
  .power-button,
  .mute-switch {
    display: none;
  }
}
</style>
